<template>
	<gracePage :customHeader="false">
		<view slot="gBody" class="grace-body">
			<view class='grace-qn-step'>
				{{currentQN + 1}} / <text>{{qns.length}}</text>
			</view>
			<view class="grace-form">
				<form @submit="formSubmit">
					<swiper class="grace-qn-swiper" :current="currentQN" @change="swiperChange" :style="{height:swiperHeight+'px'}">
						<swiper-item v-for="(item, index) in qns" :key="index">
							<view class='grace-qn-in' :style="{height:swiperHeight+'px'}">
								<view class='grace-qn-q'>{{item.question.name}}</view>
								<view class="grace-form-item grace-border-b" v-if="item.question.type == '1'">
									<view class="grace-form-body" style="padding:20rpx 0;">
										<radio-group :name="item.question.id+':1'">
											<label class="grace-check-item" v-for="(answer, answerIndex) in item.options" :key="answerIndex" style="margin:20px 0;">
												<radio :value="answer.id+''" :checked="false"></radio>{{answer.name}}
											</label>
										</radio-group>
									</view>
								</view>
								<view class="grace-form-item grace-border-b" v-if="item.question.type == '2'">
									<view class="grace-form-body" style="padding:20rpx 0;">
										<checkbox-group :name="item.question.id+':2'">
											<label class="grace-check-item" v-for="(answer, answerIndex) in item.options" :key="answerIndex" style="margin:20px 0;">
												<checkbox :value="answer.id+''" :checked="false"></checkbox>{{answer.name}}
											</label>
										</checkbox-group>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<graceFlex :classes="['row', 'xcenter']" v-if="currentQN + 1 < qns.length">
						<view class="dj-button"><button type="primary" class="grace-button" @tap="prev()" v-if="currentQN > 0">上一题</button></view>
						<view class="dj-button grace-bg-white"></view>
						<view class="dj-button grace-bg-white"><button type="primary" @tap="next()" class="grace-button">下一题</button></view>
					</graceFlex>
					<button class="grace-button grace-icons icon-write" form-type="submit" type='warn' style="width:100%;" v-if="currentQN + 1 >= qns.length">交卷</button>
				</form>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	var _self;
	export default {
		data() {
			return {
				currentQN: 0, // 当前题目
				swiperHeight: 200,
				qns: [], // 问卷数据
			};
		},
		onLoad: function(options) {
			_self = this;
			// 加载问卷信息
			this.getPager();
			// 计算屏幕高度
			wx.getSystemInfo({
				success: function(res) {
					// swiper 高度 = 屏幕高度 - 顶部步骤高度 - 底部按钮高度
					_self.swiperHeight = res.screenHeight - 260;
				}
			});
		},
		methods: {
			// 查询答卷设计数据
			async getPager() {

				// let data = await this.$apis.getPaper({moduleid:this.moduleid});

				let list = [{
						question: {
							id: 1,
							name: '改革开放以来你的进步',
							type: '1'
						},
						options: [{
								id: 1,
								name: '中国特色社会主义'
							},
							{
								id: 2,
								name: '改革开发'
							},
							{
								id: 3,
								name: '中华民族伟大复兴'
							},
							{
								id: 4,
								name: '中国梦'
							},
						],
					},
					{
						question: {
							id: 2,
							name: '改革开放以来你的进步',
							type: '2'
						},
						options: [{
								id: 5,
								name: '中国特色社会主义'
							},
							{
								id: 6,
								name: '改革开发'
							},
							{
								id: 7,
								name: '中华民族伟大复兴'
							},
							{
								id: 8,
								name: '中国梦'
							},
						],
					},
					{
						question: {
							id: 3,
							name: '改革开放以来你的进步',
							type: '2'
						},
						options: [{
								id: 5,
								name: '中国特色社会主义'
							},
							{
								id: 6,
								name: '改革开发'
							},
							{
								id: 7,
								name: '中华民族伟大复兴'
							},
							{
								id: 8,
								name: '中国梦'
							},
						],
					},
				];
				this.setData({
					qns: list
				}, this);
			},
			// 提交答题
			async submitPager(bizdata) {
				let data = await this.$apis.submitPaper({
					orderid: this.orderid,
					moduleid: this.moduleid,
					row: bizdata
				});
				let list = data.list;
				this.setData({
					qns: list
				}, this);
			},
			swiperChange: function(e) {
				this.currentQN = e.detail.current;
			},
			formSubmit: function(e) {
				//检查数据
				var data = e.detail.value;
				var errorIndex = -1;
				for (var k in data) {
					if (data[k] == '' || data[k].length < 1) {
						console.log('no', data[k]);
						errorIndex = Number(k.substring(6));
						console.log("errorIndex: " + JSON.stringify(errorIndex));
						break;
					}
				}
				if (errorIndex >= 0) {
					uni.showToast({
						title: '请完善选择',
						icon: "none"
					});
					_self.currentQN = errorIndex;
					return;
				}
				console.log(data);
				let result = this.submitPager(data);
				uni.showToast({
					title: '答卷提交！'
				});
				this.goback();
			},
			prev: function() {
				this.currentQN--;
			},
			next: function() {
				this.currentQN++;
			},
			//退回
			goback: function() {
				uni.navigateBack({});
			},
		},
		components: {
			gracePage,
			graceFlex
		}
	}
</script>
<style>
	.grace-qn-step {
		line-height: 30px;
		padding-top: 30px;
		padding-bottom: 25rpx;
		text-align: center;
		font-size: 26px;
		font-style: italic;
		color: #3688FF;
	}

	.grace-qn-step text {
		font-size: 18px;
		color: #555;
	}

	.grace-qn-swiper {
		width: 750rpx;
	}

	.grace-qn-in {
		width: 90%;
		margin: 0 5%;
		height: 300rpx;
	}

	.grace-qn-q {
		text-align: center;
		font-weight: 700;
		color: #000000;
		font-size: 18px;
		margin-top: 15px;
	}

	.dj-button{width:150rpx;}
</style>
